<!DOCTYPE html>
<html>
<head>
	<script src="lib/easeljs-0.7.1.min.js" type="text/javascript"></script>	
	<script src="lib/tweenjs-0.5.1.min.js" type="text/javascript"></script>
	<title></title>
</head>
<body onload="init()">

	<canvas id="canvas" width="800" height="800" style="border:1px solid #000"></canvas>

</body>
</html>


<script type="text/javascript">
	var stage;
	function init(){
		stage = new createjs.Stage("canvas");
		createjs.Ticker.setFPS(60);
		createjs.Ticker.addEventListener('tick',function () {
			stage.update();
		})
		sample2()
	}

	function sample() {
		var co = new createjs.Container();
		var pepper = new createjs.Bitmap('images/pepper.png');
		var title = new createjs.Text("green pepper","30px New Times Roman","#000");
		var bg = new createjs.Shape();

		bg.graphics.beginStroke("#ccc").drawRect(0,0,250,250,);
		title.x= title.y=10;
		pepper.x=pepper.y=80;
		co.regX=co.regY=125;
		co.x=200;
		co.y=300;
		co.addChild(bg,title,pepper);
		stage.addChild(co);
		createjs.Tween.get(co).to({rotation:360},4000)


		// body...
	}
	function sample2() {
		var co1 = new createjs.Container();
		var co2 = new createjs.Container();
		var pepper = new createjs.Bitmap('images/pepper.png');
		var circle = new createjs.Shape();
		circle.graphics.beginFill("#ff0000").drawCircle(0,0,50);
		var squre = new createjs.Shape();
		squre.graphics.beginFill("#ff0000").drawRect(0,0,50,50);
		var title = new createjs.Text("Ikun","30px New Times Roman","#000");
		var bg1 = new createjs.Shape();
		bg1.graphics.beginStroke("#ccc").drawRect(0,0,250,250);

		var bg2 = new createjs.Shape();
		bg2.graphics.beginStroke("#ccc").drawRect(0,0,250,250);
		title.x=title.y=10;
		squre.x=squre.y=10;
		pepper.x=pepper.y=80;
		circle.x=circle.y=120;
		co1.x=20;
		co1.y=200;
		co2.x=300;
		co2.y=200;
		co1.addChild(bg1,title,circle);
		co2.addChild(bg2,squre,pepper);
		stage.addChild(co1,co2)

		// body...
	}

</script>